<template>
	<!-- 完善个人信息-标签信息  -->
	<view class="label">

		
		<!-- <view class="content" :style="'padding-top:'+ (2*menuButtonInfo.top+48) + 'rpx'"> -->
		<view class="content">
			<!-- <view class="speed">
				<u-line-progress height="4" active-color="#909499" inactive-color="#e1e3e5" :show-percent="false" :round="false" :percent="progressPercent"></u-line-progress>
			</view> -->
			
			<view class="content_title">
				标签信息
				<text>至少选择3项</text>
			</view>
			
			<view class="label_conten" v-for="(item,index) in labelList" :key="index">
				<view class="label_conten_">{{item.label}}</view>
				<view class="label_conten_text">
					<view class="text_view" v-for="(item1,index1) in item.labelList" :key="index1">
						<!-- <text class="text" :class="selectArr.indexOf(item1.labelId) != -1 ? ' text_select' : '' " @click="setSelectArr(item1.labelId,item1)">{{item1.label}}</text> -->
						<text class="text" :class="item1.userLabelId != 0 ? ' text_select' : '' " @click="setSelectArr(item1.labelId,index,index1)">{{item1.label}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="foot_title" @click="complete">完成</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// menuButtonInfo: {
				// 	top: 25
				// },
				isTrue: false,
				progressPercent: 100,
				labelList: [],
				selectArr: [],
				labelAddselectArr: [],
				userInfo: [],
				region: '',
				isLogin: ''
			}
		},
		onLoad(prams) {
			this.init(prams)
			if(prams){
				this.isTrue = prams.isTrue;
			}
			if(prams.isLogin) {
				this.isLogin = prams.isLogin
			}
			
		},
		methods: {
			init(prams) {
				// // #ifndef H5 || APP-PLUS || MP-ALIPAY
				// this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// // #endif
				
				
				this.$apis.labelList().then(res => {
					let resData = res.data
					if(resData && resData.accountId){
						console.log("获取标签列表1111：", resData)
						this.$apis.labelList().then(res => {
							let getLabelList_ = res.data
							console.log("获取标签列表1111：", getLabelList_)
							this.labelList = JSON.parse(JSON.stringify(getLabelList_))
							this.$forceUpdate()
						})
					}else{
						console.log("获取标签列表2222：", resData)
						this.labelList = JSON.parse(JSON.stringify(resData))
						this.$forceUpdate()
					}
					
					
				})
				
				if(prams.isLogin != 1){
					// 获取个人标签
					this.$apis.labelOwner().then(res => {
						console.log("个人标签",res)
						let r = res.data
						let selectArr_ = []
						r.forEach((item, index) => {
							console.log("item.plabelId",item)
							// console.log("item.plabelId",item.labelId)
							selectArr_.push(item.labelId)
						})
						this.selectArr = JSON.parse(JSON.stringify(selectArr_));
						console.log("selectArr",this.selectArr)
						
					})
				}
				this.userInfo = uni.getStorageSync('userInfo')
				this.region = this.userInfo.province + '·' + this.userInfo.city
			},
			goNavigateBack() {
				uni.navigateBack()
			},
			complete() {
				uni.showLoading({
					title: "提交中..."
				})
				this.labelAddselectArr = []
				this.labelList.forEach((item, index) => {
					item.labelList.forEach((item1, index1) => {
						if(item1.userLabelId >0){
							let _item = {
								parentId : item1.parentId,
								labelId : item1.labelId,
								label : item1.label,
							}
							this.labelAddselectArr.push(_item)
						}
					})
				})
				if(this.labelAddselectArr.length < 3){
					uni.showToast({
						title:'至少选择三个标签',
						icon:  'none'
					})
					return;
				}
				if(this.isLogin == 1){
					this.$apis.accountEdit({
						data:{
							phone: '200',
							user: {
								address: this.region,
								age: 0,
								avatar: this.userInfo.avatarUrl,
								gender: this.userInfo.gender,
								nickname: this.userInfo.nickName,
								company: '',
								post: '',
								birthday: ''
							}
						}
					}).then(res => {
						console.log("提交成功，完善个人信息：", res)
					})
				}
				this.$apis.labelAdd(this.labelAddselectArr).then(res => {
					console.log("完善标签信息：", res.code)
					if(res.code == 200){
						uni.hideLoading()
						if(this.isTrue){
							uni.showToast({
								title:'修改成功',
								duration: 2200
							})
							setTimeout(() => {
								console.log("跳转")
								uni.navigateBack();
							},2200)
						}else{
							uni.showToast({
								title: "注册成功",
								duration: 2200
							})
							setTimeout(() => {
								uni.switchTab({
									url: "../../index/index"
								})
							},2200)
							// uni.setStorage({
							// 	key: "labelCode",
							// 	data: res.code,
							// 	success: resSet => {
							// 		uni.switchTab({
							// 			url: "../../index/index"
							// 		})
							// 		uni.showToast({
							// 			title:'完善成功'
							// 		})
							// 	}
							// })
						}
						
					}
					
				})
				
			},
			// setSelectArr(index,item){
			setSelectArr(id, index, index1){
				this.labelAddselectArr = []
				this.labelList.forEach((item, index) => {
					item.labelList.forEach((item1, index1) => {
						if(item1.userLabelId >0){
							let _item = {
								parentId : item1.parentId,
								labelId : item1.labelId,
								label : item1.label,
							}
							this.labelAddselectArr.push(_item)
						}
					})
				})
				if(this.labelList[index].labelList[index1].userLabelId == 0 && this.labelAddselectArr.length >= 20){
					uni.showToast({
						title:'最多20个',
						icon:  'none'
					})
					return;
				}
				
				
				console.log(this.labelList[index].labelList[index1])
				let isLabe = this.labelList[index].labelList[index1].userLabelId == 0 ? 200 : 0;
				this.labelList[index].labelList[index1].userLabelId = isLabe
				
				
				
				// let _index = this.selectArr.indexOf(index)
				// if(_index == -1){
				// 	this.selectArr.push(index)
				// 	let _item = {
				// 		parentId : item.parentId,
				// 		labelId : item.labelId,
				// 		label : item.label,
				// 	}
				// 	this.labelAddselectArr.push(_item)
				// }else{
				// 	this.selectArr.splice(_index,1)
				// 	this.labelAddselectArr.splice(_index,1)
				// }
			}
		}
	}
</script>

<style>
	.bg_top{
		width: 750rpx;
		background-color: #ffffff;
		position: fixed;
		z-index: 9;
	}
	.z_index{
		z-index: 10;
	}
	.top{
		width: 750rpx;
		height: 48rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: 20rpx;
	}
	.top_icon{
		margin-left: 32rpx;
		display: inline-block;
	}
	.top_title{
		position: absolute;
		font-size:38rpx;
		font-weight: 500;
		line-height: 48rpx;
		display: inline-block;
		left: 50%;
		transform: translate(-50%);
	}
	
	.content{
		padding: 0 40rpx 250rpx 40rpx;
		/* margin: 0 40rpx 250rpx 40rpx; */
	}
	.speed{
		width: 670rpx;
		margin-top: 20rpx;
	}
	.content_title{
		color: #2d3034;
		font-weight: 700;
		font-size: 44rpx;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}
	.content_title text{
		margin-left: 16rpx;
		color: #909499;
		font-size: 26rpx;
	}
	.label_conten_{
		color: #2d3034;
		font-weight: 700;
		font-size: 34rpx;
	}
	.label_conten_text {
		margin-bottom: 60rpx;
	}
	.text_view{
		 display: inline-block;
	}
	.text{
		 padding: 6rpx 10rpx;
		 border: 1px solid #e1e3e5;
		 border-radius: 4px;
		 margin-right: 20rpx;
		 display: inline-block;
		 margin-top: 20rpx;
		 font-size: 30rpx;
		 color: #606266;
	}
	.text_select{
		background-color: #606266;
		border: 1px solid #606266;
		color: #ffffff;
	}
	
	.foot{
		width: 670rpx;
		height: 84rpx;
		padding: 16rpx 40rpx 68rpx 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 10;
	}
	.foot_title{
		width: 670rpx;
		height: 84rpx;
		color: #FFFFFF;
		background: #f10200;
		border-radius: 6px;
		line-height: 84rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 700;
	}
</style>
